<template>
  <div>
    <cardTool>
      <template #headerDiy>
        <el-row style="height:40px" justify="space-between" type="flex">
          <el-col
            v-if="checkPermBtn('arceAdd')"
            :span="11"
            class="btn"
          ><el-button type="primary" size="small" @click="addArce">添加房产</el-button></el-col>
          <el-col :span="13">
            <el-row type="flex">
              <!-- 搜索可以使用过滤器和表单做 -->
              <el-form inline :model="formData">
                <el-form-item>
                  <el-select v-model="formData.category.title" style="width:108px" filterable>
                    <el-option value="全部分类" @click.native="getClassifyId('')" />
                    <el-option
                      v-for="item in classifyList"
                      :key="item.id"
                      :label="item.title"
                      :value="item.title"
                      @click.native="getClassifyId(item.id)"
                    />
                  </el-select>
                </el-form-item>

                <el-form-item>
                  <el-select v-model="formData.agent.name" style="width:108px" filterable>
                    <el-option value="全部分类" @click.native="getAgentId('')" />
                    <el-option
                      v-for="item in agentList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                      @click.native="getAgentId(item.id)"
                    />
                  </el-select>
                </el-form-item>

                <el-form-item>
                  <el-input v-model="formData.title_contains" placeholder="输入房产标题关键字" />
                </el-form-item>

                <el-form-item>
                  <el-button size="small" type="primary" @click="selectFor">筛选</el-button>
                </el-form-item>
              </el-form>
            </el-row>
          </el-col>
        </el-row>
        <div class="line" />
      </template>
      <template #body>
        <!-- 表格 -->
        <el-table
          border
          :data="tableData"
          style="width: 100%"
          :header-cell-style="headerCellStyle"
        >
          <el-table-column
            align="center"
            fixed
            label="封面"
            width="125"
          >
            <template #default="{row}">
              <img v-imgErr="require('@/assets/pepe.jpg')" class="Fimg" :src="row.image" alt="">
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="title"
            label="标题"
            width="120"
          />
          <el-table-column
            align="center"
            label="标签"
            width="120"
            prop=""
          >
            <template #default="{row}">
              <el-tag v-for="(item,index) in row.tags" :key="index" type="success">{{ item }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="address"
            label="地址"
            width="120"
          />
          <el-table-column
            align="center"
            prop="category.title"
            label="分类"
            width="150"
          />
          <el-table-column
            align="center"
            prop="agent.name"
            label="经纪"
            width="120"
          />
          <el-table-column
            align="center"
            prop="price"
            label="价格"
            width="120"
          />
          <el-table-column
            align="center"
            label="介绍"
            width="120"
          >
            <template #default="{row}">
              <p class="descc">{{ row.desc }}</p>
            </template>
          </el-table-column>
          <el-table-column label="图片" :width="350">
            <template #default="{row}">
              <img v-for="(item,index) in row.photos" :key="index" v-imgErr="require('@/assets/nvren.jpg')" :src="item" alt="" class="xFimg">
              <!-- <img v-show="!Array.isArray(row.photos)" v-imgErr="require('@/assets/nvren.jpg')" :src="row.photos" alt="" class="xFimg"> -->
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            fixed="right"
            label="操作"
            width="150"
          >
            <template #default="{row}">
              <el-button v-if="checkPermBtn('arceEdit')" type="primary" size="small" @click.native="updateFn(row.id)">编辑</el-button>
              <el-button v-if="checkPermBtn('arceDel')" type="danger" size="small" @click.native="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row style="width:100%;margin-top:16px" type="flex" justify="center">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="selectData._limit"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </template>
    </cardTool>
    <dailog ref="dailog" :table-data="tableData" :is-show.sync="isShow" @updateArce="render" @addArce="render" /></div>
</template>

<script>
import { getAllNumber, getArce, deleteArce } from '@/api/arce'
import { getAgant } from '@/api/agant'
import { getClassify } from '@/api/classify'
import Dailog from './components/Dailog.vue'
export default {
  components: { Dailog },
  data() {
    return {
      value1: '全部分类',
      value2: '全部分类',
      tableData: [],
      total: 0,
      isShow: false,
      classifyList: [],
      agentList: [],
      agID: '',
      clId: '',
      selectData: {
        _limit: 3,
        _start: 0
      },
      selectValue: '',
      w: 0,
      formData: {
        title_contains: '',
        agent: { name: 'select', id: '' },
        category: { title: 'select', id: '' }
      },
      datad: {},
      isRenderPage: 0,
      isOk: false
    }
  },
  async created() {
    await this.getNumber()
    this.getAllArceLst()
    const agent = await getAgant()
    const classify = await getClassify()
    this.agentList = agent.data
    this.classifyList = classify.data
  },
  methods: {
    headerCellStyle() {
      return 'text-align:center'
    },
    cellStyle() {
      return 'text-align:center'
    },
    // 获取全部房产列表
    async getAllArceLst(data, isOk) {
      if (isOk) {
        const res = await getArce(
          { _start: this.isRenderPage,
            _limit: 3 }
        )
        this.isOk = false
        this.tableData = res.data
        console.log(res.data, '8')
        console.log(data)
      } else {
        data ? data._start : this.isRenderPage
        const res = await getArce(
          data || this.selectData
        )
        console.log(data)
        this.tableData = res.data
        console.log(res.data, '8')
      }
    },
    // 所搜功能根据分类搜索

    async getNumber(params) {
      const res = await getAllNumber(params)
      this.total = res.data
      console.log(this.total, 'total')
    },
    handleCurrentChange(val) {
      // this.selectData._start = (val - 1) * this.selectData._limit
      this.datad._start = (val - 1) * this.selectData._limit
      this.isRenderPage = (val - 1) * this.selectData._limit
      console.log(this.datad._start)
      console.log(this.datad)
      console.log(val)
      this.datad._limit = 3
      this.getAllArceLst(this.datad)
    },
    updateFn(id) {
      this.$refs.dailog.getArceByIdY(id)
      this.isShow = true
    },
    delFn(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        if (this.tableData.length === 1) {
          this.datad._start = this.datad._start - 3
          await deleteArce(id)
          this.getNumber()
          const res = await getArce(
            { _start: this.datad._start,
              _limit: 3 }
          )
          this.isOk = false
          this.tableData = res.data
        } else {
          await deleteArce(id)
          this.getNumber()
          const res = await getArce(
            { _start: this.datad._start,
              _limit: 3 }
          )
          this.isOk = false
          this.tableData = res.data
          console.log(res.data, '8')
        }
      }).catch(() => {

      })
    },
    addArce() {
      this.isShow = true
    },
    async render() {
      this.isOk = true
      await this.getNumber()
      this.getAllArceLst(this.datad, this.isOk)
    },
    // 获取经纪id
    getAgentId(id) {
      this.formData.agent.id = id
      console.log(this.formData.agent)
    },
    async selectFor() {
      if (this.formData.title_contains && this.formData.agent.id && this.formData.category.id) {
        const res1 = await getAllNumber({
          agent: this.formData.agent.id, category: this.formData.category.id, title_contains: this.formData.title_contains
        })
        console.log(4, res1.data)

        this.datad = { ...{ _limit: 3,
          _start: 0 },
        agent: this.formData.agent.id, category: this.formData.category.id, title_contains: this.formData.title_contains
        }
        this.total = res1.data
        const res = await getArce(
          { ...{ _limit: 3,
            _start: 0 }, agent: this.formData.agent.id, category: this.formData.category.id, title_contains: this.formData.title_contains }
        )
        this.tableData = res.data
        console.log(res.data)
      } else if (this.formData.agent.id && this.formData.category.id) {
        const res1 = await getAllNumber({
          agent: this.formData.agent.id, category: this.formData.category.id
        })
        console.log(1, res1.data)
        this.datad = { ...{ _limit: 3,
          _start: 0 },
        agent: this.formData.agent.id, category: this.formData.category.id
        }
        this.total = res1.data
        const res = await getArce(
          { ...{ _limit: 3,
            _start: 0 }, agent: this.formData.agent.id, category: this.formData.category.id }
        )
        this.tableData = res.data
        console.log(res.data)
      } else if (this.formData.title_contains && this.formData.agent.id) {
        const res1 = await getAllNumber({
          agent: this.formData.agent.id, title_contains: this.formData.title_contains
        })
        console.log(5, res1.data)
        this.datad = { ...{ _limit: 3,
          _start: 0 },
        agent: this.formData.agent.id, title_contains: this.formData.title_contains
        }
        this.total = res1.data
        const res = await getArce(
          { ...{ _limit: 3,
            _start: 0 }, agent: this.formData.agent.id, title_contains: this.formData.title_contains }
        )
        this.tableData = res.data
        console.log(res.data)
      } else if (this.formData.title_contains && this.formData.category.id) {
        const res1 = await getAllNumber({
          category: this.formData.category.id, title_contains: this.formData.title_contains
        })
        console.log(6, res1.data)
        this.datad = { ...{ _limit: 3,
          _start: 0 },
        category: this.formData.category.id, title_contains: this.formData.title_contains
        }
        this.total = res1.data
        const res = await getArce(
          { ...{ _limit: 3,
            _start: 0 }, category: this.formData.category.id, title_contains: this.formData.title_contains }
        )
        this.tableData = res.data
        console.log(res.data)
      } else if (this.formData.agent.id) {
        const res1 = await getAllNumber({
          agent: this.formData.agent.id
        })
        console.log(2, res1.data)
        this.datad = { ...{ _limit: 3,
          _start: 0 }, agent: this.formData.agent.id }
        this.total = res1.data
        const res = await getArce(
          { ...{ _limit: 3,
            _start: 0 }, agent: this.formData.agent.id }
        )
        this.tableData = res.data
        console.log(res.data)
      } else if (this.formData.category.id) {
        const res1 = await getAllNumber({
          category: this.formData.category.id
        })
        console.log(3, res1.data)
        this.datad = { ...{ _limit: 3,
          _start: 0 }, category: this.formData.category.id }
        this.total = res1.data
        const res = await getArce(
          { ...{ _limit: 3,
            _start: 0 }, category: this.formData.category.id }
        )
        this.tableData = res.data
        console.log(res.data)
      } else if (this.formData.title_contains) {
        const res1 = await getAllNumber({
          ...{ _limit: 3,
            _start: 0 },
          title_contains: this.formData.title_contains
        })
        console.log(7, res1.data)
        this.datad = { ...{ _limit: 3,
          _start: 0 },
        title_contains: this.formData.title_contains
        }
        this.total = res1.data
        const res = await getArce(
          { ...{ _limit: 3,
            _start: 0 }, title_contains: this.formData.title_contains }
        )
        this.tableData = res.data
        console.log(res.data)
      } else if (!this.formData.title_contains && !this.formData.agent.id && !this.formData.category.id) {
        console.log(8)
        this.getNumber()
        this.datad = { ...{ _limit: 3,
          _start: 0 }}
        this.getAllArceLst(this.datad)
      }
    },
    getClassifyId(id) {
      this.formData.category.id = id
      console.log(this.formData.category.id)
    }
  }
}
</script>

<style lang="scss" scoped>
 ::v-deep .el-card__header{
    border: none;
  }
  .Fimg{
    width: 100px;
    height: 100px;
  }
  .xFimg{
    height: 50px;
    width: 50px;
    margin: 5px;
  }
  .btn{
    display: flex;
  }
  .descc{
    width: 536rpx;  //设置宽度
	line-height: 52rpx;
	text-align: left;
	color: #333333;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;  //使用自适应布局
	-webkit-line-clamp: 2;  //设置超出行数，要设置超出几行显示省略号就把这里改成几
	-webkit-box-orient: vertical;
  }
  .line{
    padding: 10px;
    border-bottom: 1px solid #ccc;
  }
</style>
